<template>
  <!-- 店铺信息的卡片 -->
	<view class="store-card">
		<!-- 店铺信息部分 -->
		<view class="store-info flex flex-jc-sb">
		  <view class="left-box flex flex-ai-c">
		    <view class="store-img u-skeleton-fillet">
		      <image class="img" :src="storeHeaderImg" mode="widthFix"></image>
		    </view>
		    <!-- <i-icon v-else icon="iconmorentouxiang" type="m" size="110rpx"></i-icon> -->
		    <view class="text-box">
		      <view class="font-32 color-333 u-skeleton-rect">
		        <text class="name font-bold">{{ info[keysOption.name] }}</text>
		        <i-icon v-if="info[keysOption.deposit]" icon="iconbao_1" size="30rpx" color="#EB5C02"></i-icon>
		      </view>
		      <view class="tag-text">
		        <text v-if="info[keysOption.isgover]" class="tag u-skeleton-rect">自营</text>
		        <text class="font-26 color-333 u-skeleton-rect">{{ info[keysOption.city] }}</text>              
		      </view>
		    </view>
		  </view>
		  
		  <view class="right-box">
        <view v-if="!isCurrentStore && !loading">
          <view v-show="info.isenshrine && !loading" class="szed-tag sz-tag u-skeleton-rect" @click.stop="$u.throttle(collect, 1000)">
            <text class="font-24">已收藏</text>
          </view>
          
          <view v-show="!info.isenshrine && !loading" class="sz-tag u-skeleton-rect" @click.stop="$u.throttle(collect, 1000)">
            <u-icon name="plus" size="22rpx" color="#EB5C02"></u-icon>
            <text class="font-24 color-EB5C02">收藏</text>
          </view>
        </view>
        
        <!-- 按钮 loading -->
        <view v-show="loading" class="btn-box">
          <view class="btn-loading">
            <i-icon icon="iconloading" color="#333" size="48rpx" class="icon-loading"></i-icon>
          </view>
        </view>
        
		    <view class="fs font-24 color-333 mt-10 u-skeleton-rect">粉丝:{{ info[keysOption.fans] }}</view>
		  </view>
		</view>
    
    <!-- 骨架屏 -->
    <!-- <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton> -->
	</view>
</template>

<script>
	export default {
    props: {
      // 店铺信息
      info: {
        type: Object,
        required: true
      },
      // key名
      keysOption: {
        type: Object,
        default: () => ({
          headerImg: 'headerImg',
          name: 'name',
          isgover: 'isgover',
          city: 'city',
          deposit: 'deposit',
          fans: 'fans'
        })
      }
    },
		data() {
			return {
				loading: true,
        collectFlag: false
			}
		},
    
    computed: {
      // 是否是当前店铺
      isCurrentStore() {
        let id = this.info.store_id
        let currentId = this.$store.state.userInfoDetail.store.storeId
        return id === currentId
      },
      
      storeHeaderImg() {
        let defaultHeaderImg = this.$store.state.defaultHeaderImg
        let headerImg = this.info.store_topimg || defaultHeaderImg
        return headerImg
      }
    },
    
    watch: {
      'info.store_id': function(val) {
        if (val) {
          this.loading = false
        }
      },
      
      'info.isenshrine': function(val) {
        this.loading = false
      }
    },
    
    methods: {
      // 收藏/取消收藏
      async collect() {
        try {
          this.loading = true
          let data = {
            store_id: this.info.store_id,
            fans_store_id: this.$store.state.userInfoDetail.store.storeId,
            state: !this.info.isenshrine
          }
          const res = await this.$api.store.UpdateState(data)
          this.$emit('collectChange', res.data)          
        } catch (e) {
          //TODO handle the exception
          console.log(e)
        }
      }
    }
	}
</script>

<style lang="scss" scoped>
// 店铺信息
.store-info {
  padding: 24rpx;
  background-color: #FBD220;
  
  .store-img {
    width: 110rpx;
    height: 110rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 10rpx;
    overflow: hidden;
    
    .img {
      width: 100%;
      height: 100%;
    }
  }
  
  // 左边店铺内容
  .left-box {
    flex: 1;
    padding-right: 40rpx;
    
    .text-box {
      flex: 1;
      margin-left: 20rpx;
      
      .name {
        margin-right: 15rpx;
      }
      
      .tag-text {
        margin-top: 16rpx;
        
        .tag {
          display: inline-block;
          width: 90rpx;
          height: 40rpx;
          line-height: 40rpx;
          margin-right: 18rpx;
          text-align: center;
          font-size: 24rpx;
          color: #fff;
          background-color: #1EAC1B;
          border-radius: 10rpx;
        }
      }
    }
  }
  
  // 右边收藏粉丝
  .right-box {
    .btn-box {
      position: relative;
      width: 120rpx;
      height: 50rpx;
      
      // 加载图标
      .btn-loading {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        line-height: 50rpx;
        background: rgba(250, 250, 250, 0.3);
        border: 3rpx solid #EB5C02;
        border-radius: 25rpx;
        text-align: center;
        
        .icon-loading {
          animation: myLoading 1s linear infinite;
        }
      }
      
      @keyframes myLoading {
        0%{transform:rotate(0deg);}
        25%{transform:rotate(90deg);}
        50%{transform:rotate(180deg);}
        75%{transform:rotate(270deg);}
        100%{transform:rotate(360deg);}
      }
    }
    
    .sz-tag {
      width: 120rpx;
      height: 50rpx;
      line-height: 46rpx;
      border: 3rpx solid #EB5C02;
      border-radius: 25rpx;
      text-align: center;
      font-weight: bold;
      margin-left: auto;
    }
    
    .szed-tag {
      background-color: #EB5C02;
      
      text {
        color: #fff;
      }
    }
    
    .fs {
      text-align: right;
    }
  }
}
</style>
